<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 15:30:17
-->
<template>
<div ref="right2_container" style="height: 95%"></div>
</template>

<script>
   import { Line } from '@antv/g2plot';
    export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    // 3. 初始化图表
    initChart(){
      const data = [
        {name: 'tsp',time:'12/22-15:03',value: 59},
        {name: 'tsp',time:'12/22-15:04',value: 36},
        {name: 'tsp',time:'12/22-15:05',value: 78},
        {name: 'tsp',time:'12/22-15:06',value: 59},
        {name: 'pm10',time:'12/22-15:03',value: 99},
        {name: 'pm10',time:'12/22-15:04',value: 88},
        {name: 'pm10',time:'12/22-15:05',value: 101},
        {name: 'pm10',time:'12/22-15:06',value: 121},
        
      ]
      const linePlot = new Line(this.$refs.right2_container, {
        data,
        xField: 'time',
        yField: 'value',
        seriesField: 'name',
        legend: {
          position: 'top',
        },
        smooth: true,
        // @TODO 后续会换一种动画方式
        animation: {
          appear: {
            animation: 'path-in',
            duration: 5000,
          },
        },
      });

      linePlot.render();
    }
  }
}
</script>
